<template>
  <view>
    <view class="u-p-24">
      <view class="bg-white u-p-24 form">
        <u-form-item label="姓名" label-width="140">
          <u-input v-model="form.name" />
        </u-form-item>
        <u-form-item label="电话" label-width="140">
          <u-input v-model="form.phone" />
        </u-form-item>
        <u-form-item label="地区" label-width="140">
          <u-input :value="form.region" type="select" @click="cityPicker=true" />
        </u-form-item>
        <u-picker mode="region" v-model="cityPicker" @confirm="cityChoose"></u-picker>

        <u-form-item label="详细地址" label-width="140">
          <u-input v-model="form.detail" type="textarea" />
        </u-form-item>
      </view>
      
      <u-gap height="100"></u-gap>
      <my-btn :size="[700, 80, 30]" bg="#ffb849" color="#fff" round @click="test">保存</my-btn>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          phone: '',
          region: '',
          detail: ''
        },
        cityPicker: false,
      };
    },
    methods: {
      cityChoose(e) {
        let province = e.province.label
        let city = e.city.label
        let area = e.area.label
        this.form.region = [province, city, area].join('-')
      },
    }
  }
</script>

<style lang="scss">
  page {
    background: #f5f5f5;
  }

  .form {
    border-radius: 16rpx;
  }
</style>
